<template>
  <div>
    <h2>World</h2>

    <button @click="url = 'http://localhost:3000/books'">books</button>
    <button @click="url = 'http://localhost:3000/carts'">carts</button>

    <div v-if="error">接口请求出错了，错误是 {{ error.message }}</div>
    <div v-else-if="data">
      <ul>
        <li v-for="item in data" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
    <div v-else>请求中...</div>
  </div>
</template>

<script>
// 引入 useFetch
import { ref } from 'vue'
import useFetch from '../hooks/useFetch'

export default {
  setup() {
    const url = ref('http://localhost:3000/books')

    // 调用 useFetch
    const { data, error } = useFetch(url)

    return {
      url,
      data,
      error,
    }
  },
}
</script>
